
<template>
    <div class="map-environment">
        <div class="environment-setting-content">
            <ul>
                <li v-for="(item,index) in environmentData">
                    <span class="environment-title">{{ item.title }}</span>
                    <el-switch
                    @change="changeEnvironment(item,index)"
                        v-model="item.value"
                        active-color="#13ce66"
                        inactive-color="#ff4949">
                    </el-switch>
                </li>
            </ul>
        </div>
    </div>
  </template>
  
  <script setup lang="ts">
import SnowEffect from "@/utils/environment/snow"
import RainEffect from '@/utils/environment/rain'
import FogEffect from "@/utils/environment/fog";
import { useCesiumGlobalStore } from "@/store/modules/cesiun-global"
import { onMounted, onUnmounted, ref } from "vue";
import { Color } from "cesium";
import constellationEffect from '@/utils/environment/constellation'
  const cesiumGlobalStore = useCesiumGlobalStore()
  const environmentData = ref([
    {
        title:'光照',
        value: false,
    },
    {
        title: '大气层',
        value: false
    },
    {
        title: '雾',
        value: false
    },
    {
        title: '雨',
        value: false
    },
    {
        title: '雪',
        value: false,
    },
    {
        title: '云图',
        value: false,
    },
    {
        title: '恒星星座',
        value: false
    }
  ])


  const constellationData = [
            {
            name: "Orion",
            stars: [
                { id: 1, position: [5.918, -1.201], name: "Betelgeuse" },
                { id: 2, position: [5.603, -0.819], name: "Rigel" },
            ],
            lines: [
                { start: [5.918, -1.201], end: [5.603, -0.819] },
            ],
            },
        ];
  const Fog = new FogEffect(cesiumGlobalStore.viewerInstance, {
    visibility: 0.2,
    color: new Color(0.8, 0.8, 0.8, 0.3)
    })
  const snow = new SnowEffect(cesiumGlobalStore.viewerInstance , {
    snowSize: 0.02, // 雪花大小
    snowSpeed: 100.0, // 雪速
  })

  const rain =  new RainEffect(cesiumGlobalStore.viewerInstance,{
    tiltAngle: -0.2,
    rainSize: 0.6,
    rainSpeed: 350.0,
  })

  const constellation = new constellationEffect(cesiumGlobalStore.viewerInstance, constellationData)
  
  onMounted(async () => {
    snow.show(false)
    rain.show(false)
    Fog.show(false)
  })
  onUnmounted(() => {
    snow.destroy()
    rain.destroy()
    Fog.destroy()
  })
  //增加天气效果
  const changeEnvironment = (item: { title: string; value: boolean; }, index: number) => {

    if(index === 4){
        console.log(item.value,'===')
        if(item.value) {
            snow.show(true)
        }else{
            snow.show(false)
        }
    }else if(index === 3) {
        if(item.value) {
            rain.show(true)
        }else{
            rain.show(false)
        }
    }else if(index === 2) {
        if(item.value) {
            Fog.show(true)
        }else{
            Fog.show(false)
        }
    }else if(index === 6) {
        if(item.value) {
            constellation.drawConstellation()
        }
    }
  }
  </script>
  
  <style scoped lang="less">
.map-environment{
    .environment-setting-content{
        ul{
            padding: 0;
            margin: 0;
        }
        li{
            padding: 5px 0;
            border-bottom: 1px solid #eee;
            .environment-title{
                color: #999;
                font-size: 14px;
                line-height: 32px;
            }
            list-style:none;
            display: flex;
            justify-content: space-between;
        }
    }
}
  </style>
  